

import { toRef, watch, computed, ref, onMounted } from "vue";
import { useStore } from "vuex";
export default function (lyricbox) {

    const store = useStore();
    let objectDistance = ref(0)
    let time = null;
    let setTime = null;
    onMounted(() => {

        function animat(aim) {

            function animatMove() {
                const move = Math.ceil((aim - lyricbox.value.scrollTop) / 32);
                if (move > 0) {
                    time = setInterval(() => {
                        if (lyricbox.value.scrollTop + move >= aim) {
                            clearInterval(time);
                            time = null;
                            lyricbox.value.scrollTop = aim;
                        } else {
                            lyricbox.value.scrollTop = lyricbox.value.scrollTop + move;

                        }

                    }, 15)
                    clearTimeout(setTime);
                    setTime = setTimeout(() => {
                        if (time !== null) {
                            clearInterval(time);
                            setTime = null;
                        }

                    }, 1500)
                } else {
                    time = setInterval(() => {
                        if (lyricbox.value.scrollTop + move <= aim) {
                            clearInterval(time);
                            time = null;
                            lyricbox.value.scrollTop = aim;
                        } else {
                            lyricbox.value.scrollTop = lyricbox.value.scrollTop + move;

                        }

                    }, 15)
                    clearTimeout(setTime);
                    setTime = setTimeout(() => {
                        if (time !== null) {
                            clearInterval(time);
                            setTime = null;
                        }

                    }, 1500)
                }
            }

            if (time === null) {
                animatMove();
            } else {
                clearInterval(time);
                animatMove();
            }

        }





        const lyricTime = toRef(store.state.PlaySong, "playingNumberTime");

        const LyricProgressTime = computed(() => store.state.SongLyric.lyricProgressTime);
        const arr = computed(() => lyricbox.value.children);
        //  获取最后一个arr元素的offsetTop 加上自身的高度等于 歌词最大高;   然后减去219 等于最多可以被卷去的距离;
        const MaxH = computed(() => arr.value[arr.value.length - 1].offsetTop + arr.value[arr.value.length - 1].offsetHeight - 219);
        function end() {
            if (store.state.SongLyric.lyricElement) {
                store.state.SongLyric.lyricElement.className = "";
            }
            arr.value[arr.value.length - 1].className = "z-sel";
            animat(MaxH.value);
            store.commit("SongLyric/changeLyricElement", arr.value[arr.value.length - 1]);
            return arr.value.length - 1
        }


        


        watch(lyricTime, (value) => {
           
            if (value >= LyricProgressTime.value) {
                for (let index = 0; index < arr.value.length; index++) {
                    if (value >= arr.value[index].getAttribute("data-time")) {
                        const i = index + 1 < arr.value.length ? index + 1 : end();
                        if (value < arr.value[i].getAttribute("data-time")) {
                            if (store.state.SongLyric.lyricElement) {
                                store.state.SongLyric.lyricElement.className = ""
                            }
                            store.commit(
                                "SongLyric/changeLyricProgressTime",
                                arr.value[i].getAttribute("data-time")
                            );
                            arr.value[index].className = "z-sel";
                            //  当前要移动的目标距离是否超过了歌词最大可滚动的距离
                            objectDistance.value = arr.value[index].offsetTop - 96 <= MaxH.value ? arr.value[index].offsetTop - 96 : MaxH.value;
                            objectDistance.value = objectDistance.value >= 0 ? objectDistance.value : 0;
                            // mubiao.value = move;
                            animat(objectDistance.value);
                            store.commit("SongLyric/changeLyricElement", arr.value[index]);
                            break;

                        }


                    }
                }
            }
        });
    })


    return objectDistance
}